<!--
 * @Author: zny.yjw
 * @Date: 2022-03-31 09:46:44
 * @LastEditTime: 2022-03-31 14:51:32
 * @LastEditors: zny.yjw
 * @FilePath: \mapboxdemo\tianditu.html
 * @Description: 
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="#" />
    <title>MapBoxGL加载天地图及加载控件</title>
    <!--引入mapboxgl库-->
    <script src='./lib/js/mapbox-gl.js'></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
    <!--引入mapboxgl原生样式表-->
    <!-- <link href='./lib/css/MapBox_GL.css' rel='stylesheet' /> ;
    <link href="./lib/css/style.css" rel="stylesheet" /> -->
</head>

<body>
    <div id='map'></div>
    <script>
        //天地图（各个区域的token可以在网上查到）
        var vecUrl = "http://t0.tianditu.com/vec_w/wmts?tk=e90d56e5a09d1767899ad45846b0cefd";
        var cvaUrl = "http://t0.tianditu.com/cva_w/wmts?tk=e90d56e5a09d1767899ad45846b0cefd";
        //使用严格模式
        "use strict";
        //实例化source对象
        var tdtVec = {
            //类型为栅格瓦片
            "type": "raster",
            'tiles': [
                //请求地址
                vecUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
            ],
            //分辨率
            'tileSize': 256
        };
        var tdtCva = {
            "type": "raster",
            'tiles': [
                cvaUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
            ],
            'tileSize': 256
        };
        //实例化Map地图对象
        var map = new mapboxgl.Map({
            //地图容器div的id
            container: 'map',
            style: {
                //设置版本号，一定要设置
                "version": 8,
                //添加来源
                "sources": {
                    "tdtVec": tdtVec,
                    "tdtCva": tdtCva
                },
                "layers": [{
                    //图层id，要保证唯一性
                    "id": "tdtVec",
                    //图层类型
                    "type": "raster",
                    //数据源
                    "source": "tdtVec",
                    //图层最小缩放级数
                    "minzoom": 0,
                    //图层最大缩放级数
                    "maxzoom": 17
                }, {
                    "id": "tdtCva",
                    "type": "raster",
                    "source": "tdtCva",
                    "minzoom": 0,
                    "maxzoom": 17
                }],
            },
            //地图中心点
            center: [113.679943564, 22.559617265],
            //地图当前缩放级数
            zoom: 8
        });
        console.log('====================================');
        console.log(map);
        console.log('====================================');
        //实例化导航控件
        var nav = new mapboxgl.NavigationControl({
            //是否显示指南针，默认为true
            "showCompass": true,
            //是否显示缩放按钮，默认为true
            "showZoom": true
        });
        //添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
        map.addControl(nav, 'top-left');
    </script>
</body>

</html>